<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国内折扣详情页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="../utils/flexible.js"></script>
    <link rel="stylesheet" href="../css/inlandproduct.css">
</head>
<body>
    <header>
        <button>返回</button>
        <p> 国内折扣</p>
        <img src="../images/header_app.png" alt="">
    </header>
    <a href="#">前往购买</a>
    <!-- 内容部分 -->
    <div class="container">
    </div>


    <img src="../images/mmbweixin2.png" alt="" class="imgcenter">


    <!-- 底部 -->
    <footer>
        <ul>
            <li>登录</li>
            <li>注册</li>
            <li class="returntop">返回顶部</li>
        </ul>
        <p>
            手机APP下载慢慢买手机版-掌上比价平台<br>
            m.manmanbuy.com
        </p>
    </footer>

    
</body>
</html>
<script>
    // 返回上一级
    let bn=document.querySelector('button');
    bn.addEventListener('click',function(){
        history.go(-1);
    })

    // 解析url
    let href = location.href;
    console.log(href);
    function getUrlParams(url) {
        //1.对url进行处理,把?号后面的参数匹配出来,使用正则进行匹配
        //http://127.0.0.1:5500/detail.html?id=20&age=99
        let reg = /^[^\s]+\?([^&\s\d]+=[^\s]+)*/
        let match = reg.exec(url)
        match = match[1]
        if (!match) {//表示没匹配到
            console.warn("没有匹配到相应的query参数")
            return null
        }
        // console.log(match);
        //对参数进行uri解码
        let queryString = decodeURI(match);
        // console.log(queryString);
        //将queryString以"&"符号为分割点 切割成为一个数组
        let queryArr = queryString.split("&");
        // console.log(queryArr);
        let queryParamsObj = {}//用于存储处理好的query数据
        queryArr.forEach(item => {
            let itemArr = item.split("=") //对每个item 'id=20'这样的切割成['id','20']
            queryParamsObj[itemArr[0]] = itemArr[1]
        })
        // console.log(queryParamsObj);
        //将最终处理的结果返回
        return queryParamsObj
    }
    let qr = getUrlParams(href)
    console.log(qr);
    let { productid } = qr;//解构传递过来的productid这个参数

    //根据获取的productid向后端发送请求

    $.ajax({
        url: "http://chst.vip:1234/api/getdiscountproduct",
        data: {
            productid
        }
    })
        .then(res => {
            console.log(res);
            //混合解构 {result: [{...}]}
            let { result: [info] } = res; //使用混合解构的方式 将对象中的数组中的第一项解构出来
            // console.log(info);
            let html = `
                <h1 class="title">
                    ${info.productName}
                </h1>
                <h2>${info.productFrom}&nbsp;&nbsp;${info.productTime}&nbsp;&nbsp;${info.productTips}</h2>
                <h3>
                    ${info.productInfo}
                    ${info.productPrice}
                </h3>
                <p>${info.productImg}</p>
                ${info.productComment}
            `
            $(".container").html(html);
            // 返回顶部  
            $('footer .returntop').click(function(){
                document.documentElement.scrollTop=0;
                console.log(456);
                
            })
        })
        
</script>


<!-- 

    <h3 class="detail">
                ${info.productInfo}
                ${info.productInfo1}
                ${info.productInfo2}
            </h3>
 -->